<template>
  <zm-body>
    <div
      id="mapBox"
      :class="{ready:mapReady}"
      class="main-body-mapbox"
      style="height:100vh;width:100vw"
    />
  </zm-body>
</template>

<script>
/*
   功能模块  案件分析
   创建人    zgf
   更新时间  2020/04/14
   备注
*/
export default {
  name: "mapDemo",
  data() {
    return {
      map: null,
      mapReady: false
    };
  },
  mounted() {
    window.vmComponent = this;
    this.$nextTick(() => {
      this.mapInit();
    });
  },
  methods: {
    mapInit() {
      const self = this;
      const AMap = window.AMap;
      setTimeout(() => {
        this.mapReady = true;
      }, 1000);
      self.map = new AMap.Map("mapBox", {
        mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
        viewMode: "3D",
        turboMode: true,
        defaultCursor: "pointer",
        showBuildingBlock: true,
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: 5,
        pitch: 70,
        center: [114.901112, 39.564747],
        forceVector: true
      });
      this.addMarkerToMap({
        position: [107.770985, 37.772144]
      });
      this.addMarkerToMap2({
        position: [117.922352, 33.744117]
      });
      this.addMarkerToMap3({
        position: [85.677479, 37.824773]
      });
      this.addMarkerToMap4({
        position: [131.127919, 34.063829]
      });
      this.addMarkerToMap5({
        position: [105.815419, 24.259256]
      });
      this.addMarkerToMap6({
        position: [120.80077, 23.817784]
      });
      this.addMarkerToMap7({
        position: [131.479481, 22.889861]
      });
      this.addMarkerToMap8({
        position: [99.61913, 21.95555]
      });
    },
    //在地图上添加标注点
    addMarkerToMap(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="corrugated-effect">
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      </div>`;
      //   var markerContent1 = `<div class="map-mini-marker"></div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-100, -70)
      });
      //   var marker2 = new AMap.Marker({
      //     position: position,
      //     // 将 html 传给 content
      //     content: markerContent1,
      //     // 以 icon 的 [center bottom] 为原点
      //     offset: new AMap.Pixel(0, 0)
      //   });
      // 将 markers 添加到地图
      self.map.add(marker);
      //   self.map.add(marker2);
    },
    //在地图上添加标注点
    addMarkerToMap7(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="around-effect">
      <div class="around-effect-item">
        <div class="around-effect-item-rotate">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
      <div class="around-effect-item">
        <div class="around-effect-item-rotate">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
      <div class="around-effect-item">
        <div class="around-effect-item-rotate">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
      <div class="around-effect-item">
        <div class="around-effect-item-rotate">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
      </div>`;
      //   var markerContent1 = `<div class="map-mini-marker"></div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-200, -140)
      });
      //   var marker2 = new AMap.Marker({
      //     position: position,
      //     // 将 html 传给 content
      //     content: markerContent1,
      //     // 以 icon 的 [center bottom] 为原点
      //     offset: new AMap.Pixel(0, 0)
      //   });
      // 将 markers 添加到地图
      self.map.add(marker);
      //   self.map.add(marker2);
    },
    //在地图上添加标注点
    addMarkerToMap2(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="corrugated-effect3">
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-content">1</div>
      </div>`;
      // var markerContent1 = `<div class="map-mini-marker"></div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-149, -302)
      });
      // var marker2 = new AMap.Marker({
      //   position: position,
      //   // 将 html 传给 content
      //   content: markerContent1,
      //   // 以 icon 的 [center bottom] 为原点
      //   offset: new AMap.Pixel(0, 0)
      // });
      // 将 markers 添加到地图
      self.map.add(marker);
      // self.map.add(marker2);
    },
    //在地图上添加标注点
    addMarkerToMap3(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="corrugated-effect2">
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-content">2</div>
      </div>`;
      // var markerContent1 = `<div class="map-mini-marker"></div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-206, -358)
      });
      // var marker2 = new AMap.Marker({
      //   position: position,
      //   // 将 html 传给 content
      //   content: markerContent1,
      //   // 以 icon 的 [center bottom] 为原点
      //   offset: new AMap.Pixel(0, 0)
      // });
      //   将 markers 添加到地图
      self.map.add(marker);
      // self.map.add(marker2);
    },
    //在地图上添加标注点
    addMarkerToMap5(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="corrugated-effect4">
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-content">58</div>
      </div>`;

      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-149, -302)
      });
      self.map.add(marker);

      //   var markerContent1 = `<div class="map-mini-marker"></div>`;
      //   var marker2 = new AMap.Marker({
      //     position: position,
      //     // 将 html 传给 content
      //     content: markerContent1,
      //     // 以 icon 的 [center bottom] 为原点
      //     offset: new AMap.Pixel(0, 0)
      //   });
      //   self.map.add(marker2);
    },
    addMarkerToMap6(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="corrugated-effect5">
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-item"></div>
      <div class="corrugated-effect-content">58</div>
      </div>`;

      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-149, -302)
      });
      self.map.add(marker);

      //   var markerContent1 = `<div class="map-mini-marker"></div>`;
      //   var marker2 = new AMap.Marker({
      //     position: position,
      //     // 将 html 传给 content
      //     content: markerContent1,
      //     // 以 icon 的 [center bottom] 为原点
      //     offset: new AMap.Pixel(0, 0)
      //   });
      //   self.map.add(marker2);
    },
    //在地图上添加标注点
    addMarkerToMap4(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="map-panel-1">
      <div class="map-panel-content">
      <h2>我是标题</h2>
      <p>我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述</p>
      </div>
      </div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-2, -340)
      });

      //   将 markers 添加到地图
      self.map.add(marker);

      //   var markerContent1 = `<div class="map-mini-marker"></div>`;
      //   var marker2 = new AMap.Marker({
      //     position: position,
      //     // 将 html 传给 content
      //     content: markerContent1,
      //     // 以 icon 的 [center bottom] 为原点
      //     offset: new AMap.Pixel(0, 0)
      //   });
      //   self.map.add(marker2);
    },
    //在地图上添加标注点
    addMarkerToMap8(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="map-panel-2">
      <div class="map-panel-content">
      <h2>我是标题</h2>
      <p>我是描述我是描述我是描述我是描述我是描是描述</p>
      </div>
      </div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-133, -192)
      });

      //   将 markers 添加到地图
      self.map.add(marker);

      // var markerContent1 = `<div class="map-mini-marker"></div>`;
      // var marker2 = new AMap.Marker({
      //   position: position,
      //   // 将 html 传给 content
      //   content: markerContent1,
      //   // 以 icon 的 [center bottom] 为原点
      //   offset: new AMap.Pixel(0, 0)
      // });
      // self.map.add(marker2);
    },
    //批量添加点
    addPointsListToMap() {
      this.removeMapMarkers();
      for (var i in this.caseList) {
        let item = this.caseList[i];
        this.addMarkerToMap(item, i);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../css/mixin.less";
//////////////////////////////////
@keyframes corrugated {
  from {
    transform: rotateX(70deg) translateZ(30px) scale(0);
    opacity: 1;
    background-color: rgba(165, 150, 255, 0.9);
  }
  to {
    transform: rotateX(70deg) translateZ(30px) scale(1);
    opacity: 0;
    background-color: rgba(108, 203, 255, 0.6);
  }
}
.corrugated-effect {
  position: relative;
  .corrugated-effect-item {
    animation-name: corrugated;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    border-radius: 500px;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    &:nth-child(2) {
      animation-delay: 1s;
    }
    &:nth-child(3) {
      animation-delay: 2s;
    }
  }
}

.corrugated-effect4 {
  position: relative;
  .corrugated-effect-item {
    animation-name: corrugated;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    border-radius: 500px;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    &:nth-child(2) {
      animation-delay: 1s;
    }
    &:nth-child(3) {
      animation-delay: 2s;
    }
  }
}

//////////////////////////////////
@keyframes corrugated2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
.corrugated-effect2 {
  position: relative;
  transform: scale(0.5);
  width: 413px;
  height: 413px;
  &::after {
    content: "";
    display: block;
    width: 2px;
    height: 300px;
    background-color: #45c9fb;
    position: absolute;
    left: 50%;
    top: 50%;
  }
  &::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: #45c9fb;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    top: 506.5px;
    border-radius: 10px;
  }
  .corrugated-effect-content {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(2);
    font-size: 20px;
    color: royalblue;
  }
  .corrugated-effect-item {
    width: 413px;
    height: 413px;
    position: absolute;
    right: 0;
    left: 0;
    background-image: url(../../../public/images/huan/huan3.png);
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    animation-name: corrugated2;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-timing-function: linear;

    &:nth-child(2) {
      animation-delay: 0.5s;
      background-size: 351px 351px;
      background-image: url(../../../public/images/huan/huan4.png);
      animation-direction: reverse;
    }
    &:nth-child(3) {
      animation-delay: 1s;
      background-size: 269px 269px;
      background-image: url(../../../public/images/huan/huan2.png);
    }
    &:nth-child(4) {
      animation-delay: 1.5s;
      background-size: 145px 145px;
      background-image: url(../../../public/images/huan/huan1.png);
      animation-direction: reverse;
    }
    &:nth-child(5) {
      animation-delay: 1s;
      background-size: 232px 232px;
      background-image: url(../../../public/images/huan/huan6.png);
      animation-direction: reverse;
    }
    &:nth-child(6) {
      background-color: #45c9fb;
      width: 100px;
      height: 100px;
      border-radius: 100px;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      right: auto;
      display: flex;
      justify-self: center;
      align-items: center;
    }
  }
}
//////////////////////////
.corrugated-effect3 {
  position: relative;
  transform: scale(0.5);
  width: 300px;
  height: 300px;
  &::after {
    content: "";
    display: block;
    width: 2px;
    height: 300px;
    background-color: #45c9fb;
    position: absolute;
    left: 50%;
    top: 50%;
  }
  &::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: #45c9fb;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    top: 450px;
    border-radius: 10px;
  }
  .corrugated-effect-content {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(2);
    font-size: 20px;
    color: royalblue;
  }
  .corrugated-effect-item {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    left: 0;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    animation-name: corrugated2;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
    &:nth-child(3) {
      animation-delay: 1s;
      background-size: 269px 269px;
      background-image: url(../../../public/images/huan/huan2.png);
    }
    &:nth-child(4) {
      animation-delay: 1.5s;
      background-size: 145px 145px;
      background-image: url(../../../public/images/huan/huan1.png);
      animation-direction: reverse;
    }
    &:nth-child(5) {
      animation-delay: 1s;
      background-size: 232px 232px;
      background-image: url(../../../public/images/huan/huan6.png);
      animation-direction: reverse;
    }
    &:nth-child(6) {
      background-color: #45c9fb;
      width: 100px;
      height: 100px;
      border-radius: 100px;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      right: auto;
      display: flex;
      justify-self: center;
      align-items: center;
    }
  }
}
.corrugated-effect4 {
  position: relative;
  transform: scale(0.5);
  width: 300px;
  height: 300px;
  &::after {
    content: "";
    display: block;
    width: 2px;
    height: 300px;
    background-color: #ff56d4;
    position: absolute;
    left: 50%;
    top: 50%;
  }
  &::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: #ff56d4;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    top: 450px;
    border-radius: 10px;
  }
  .corrugated-effect-content {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(2);
    font-size: 20px;
    color: #fff;
  }
  .corrugated-effect-item {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    left: 0;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    animation-name: corrugated2;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
    &:nth-child(3) {
      animation-delay: 1s;
      background-size: 269px 269px;
      background-image: url(../../../public/images/huan/red-huan2.png);
    }
    &:nth-child(4) {
      animation-delay: 1.5s;
      background-size: 145px 145px;
      background-image: url(../../../public/images/huan/red-huan1.png);
      animation-direction: reverse;
    }
    &:nth-child(5) {
      animation-delay: 1s;
      background-size: 232px 232px;
      background-image: url(../../../public/images/huan/red-huan6.png);
      animation-direction: reverse;
    }
    &:nth-child(6) {
      background-color: #ff56d4;
      width: 100px;
      height: 100px;
      border-radius: 100px;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      right: auto;
      display: flex;
      justify-self: center;
      align-items: center;
    }
  }
}
.corrugated-effect5 {
  position: relative;
  transform: scale(0.5);
  width: 300px;
  height: 300px;
  &::after {
    content: "";
    display: block;
    width: 2px;
    height: 300px;
    background-color: #ffcb2b;
    position: absolute;
    left: 50%;
    top: 50%;
  }
  &::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: #ffcb2b;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    top: 450px;
    border-radius: 10px;
  }
  .corrugated-effect-content {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(2);
    font-size: 20px;
    color: royalblue;
  }
  .corrugated-effect-item {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    left: 0;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    animation-name: corrugated2;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
    &:nth-child(3) {
      animation-delay: 1s;
      background-size: 269px 269px;
      background-image: url(../../../public/images/huan/yellow-huan2.png);
    }
    &:nth-child(4) {
      animation-delay: 1.5s;
      background-size: 145px 145px;
      background-image: url(../../../public/images/huan/yellow-huan1.png);
      animation-direction: reverse;
    }
    &:nth-child(5) {
      animation-delay: 1s;
      background-size: 232px 232px;
      background-image: url(../../../public/images/huan/yellow-huan6.png);
      animation-direction: reverse;
    }
    &:nth-child(6) {
      background-color: #ffcb2b;
      width: 100px;
      height: 100px;
      border-radius: 100px;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      right: auto;
      display: flex;
      justify-self: center;
      align-items: center;
    }
  }
}
//////////////
.map-panel-1 {
  width: 370px;
  height: 345px;
  background-image: url(../../../public/images/huan/panel-bg.png);
  background-size: 100% auto;
  .map-panel-content {
    padding-left: 90px;
    padding-right: 80px;
    height: 140px;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 1px 20px #2cf5ff;
    color: #2cf5ff;
    flex-direction: column;
    h2 {
      margin: 0;
    }
  }
}
//////////////////////////////
.around-effect {
  position: relative;
  &:hover {
    .around-effect-item {
      opacity: 1;
      &:nth-child(2) {
        top: -30px;
      }
      &:nth-child(3) {
        opacity: 1;
        top: -60px;
      }
      &:nth-child(4) {
        opacity: 1;
        top: -90px;
      }
    }
  }
  .around-effect-item {
    transform: rotateX(70deg) translateZ(30px);
    border-radius: 500px;
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    border: solid 3px #7d7eff;
    opacity: 0.3;
    transition: all 0.5s;
    .around-effect-item-rotate {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      animation-name: corrugated2;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    span {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;

      &::after,
      &::before {
        left: 0;
        top: 50%;
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        background-color: #7d7eff;
        position: absolute;
        margin-left: -6px;
        margin-right: 0;
        margin-top: -6px;
        transform: rotate(45deg);
        animation-name: corrugated2;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      &::before {
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: -6px;
      }
      &:nth-child(1) {
        transform: rotate(30deg);
      }
      &:nth-child(2) {
        transform: rotate(60deg);
      }
      &:nth-child(3) {
        transform: rotate(90deg);
      }
      &:nth-child(4) {
        transform: rotate(-60deg);
      }
      &:nth-child(5) {
        transform: rotate(-30deg);
      }
    }
    &:nth-child(1) {
      opacity: 1;
      z-index: 1;
    }
    &:nth-child(2) {
      width: 300px;
      height: 300px;
      left: 50px;
      top: 50px;
      z-index: 2;
      background-image: radial-gradient(
        ellipse,
        rgba(125, 126, 265, 0),
        rgba(125, 126, 265, 0.2),
        rgba(125, 126, 265, 1)
      );
    }
    &:nth-child(3) {
      width: 200px;
      height: 200px;
      z-index: 3;
      background-image: radial-gradient(
        ellipse,
        rgba(125, 126, 265, 0),
        rgba(125, 126, 265, 0.2),
        rgba(125, 126, 265, 1)
      );
      left: 100px;
      top: 100px;
    }
    &:nth-child(4) {
      width: 100px;
      height: 100px;
      z-index: 4;
      background-image: radial-gradient(
        ellipse,
        rgba(125, 126, 265, 0),
        rgba(125, 126, 265, 0.2),
        rgba(125, 126, 265, 1)
      );
      left: 150px;
      top: 150px;
    }
  }
}

.map-panel-2 {
  width: 230px;
  height: 194px;
  background-image: url(../../../public/images/huan/box-bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  .map-panel-content {
    padding: 10px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 1px 20px #2cf5ff;
    color: #2cf5ff;
    flex-direction: column;
    h2 {
      margin: 0;
    }
    p {
      margin-top: 10px;
    }
  }
}
</style>
